<template>
	<view>
		<!-- :title="$t('friend.friend_apply')" -->
		<u-navbar title="群通知"></u-navbar>
		<view class="nav-seize"></view>
		<view class="nav" :style="{top:`${navBar}px`}">
			<view class="item" :class="{active:nav.cur==index}" v-for="(item,index) in nav.list" :key="index" @tap="changeNav(index)">
				<text class="label">{{item.text}}</text>
			</view>
		</view>
		<view class="petition-list u-m-t-20">
			<view class="u-p-x-30 u-p-y-20 u-border-bottom" v-for="(item,idx) in applies.list" :key="idx">
				<view class="u-flex">
					<view class="avatar" @tap="jumpTo(`/pages/user/info?id=${item.userId}`)">
						<!-- <image class="img" src="https://img2.baidu.com/it/u=1180259093,3021769878&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" mode="aspectFill"></image> -->
						<image class="img" :src="item.userAvatar" mode="aspectFill"></image>
					</view>
					<view class="u-flex-1 u-m-l-20">
						<text class="u-font-32" @tap="jumpTo(`/pages/user/info?id=${item.userId}`)">{{item.userName}}</text>
					</view>
				</view>
				<view class="">
					
				</view>
				<view class="petition-body">
					<view class="u-font-28"><text class="text-gray">申请时间：</text><text>{{item.createDate|timeF}}</text></view>
					<view class="u-m-t-14 bg-gray-light u-p-x-20 u-p-y-10 radius">
						<view class="">
							<text class="u-font-32">申请加入群聊 「{{item.groupName}}」</text>
						</view>
						<!-- <view v-if="item.reason">
							<text class="u-font-32">{{item.reason}}</text>
						</view> -->
					</view>
					<view class="u-m-t-14 radius" v-if="item.reason">
						<text class="u-font-32">{{item.reason}}</text>
					</view>
					<view class="btn-group u-m-t-14" v-if="item.status==stateEnum.pending">
						<view class="btn line-red" @tap="rejectPetition(item)">
							拒绝
						</view>
						<view class="u-m-l-30 btn bg-blue" @tap="agreePetition(item)">
							同意
						</view>
					</view>
					<view class="btn-group u-m-t-14" v-else>
						<view class="btn reject" v-if="item.status==stateEnum.reject">
							已拒绝
						</view>
						<view class="btn pass" v-else-if="item.status==stateEnum.pass">
							已同意
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view v-if="applies.nomore&&!applies.list.length" class="u-flex u-row-center u-m-t-30">
			<text class="text-gray">暂无数据</text>
		</view>
		<prompt-sheet
			v-model="prompt.show"
			:title="prompt.title" 
			:maxLength="prompt.maxLength"
			:placeholder="prompt.placeholder"
			:confirm-color="prompt.confirmColor" 
			:confirm-text="prompt.confirmText"
			@confirm="resolve"
			@cancel="reject"
		></prompt-sheet>
		<u-modal v-model="ask.show" :content="ask.content" @confirm="resolve" @cancel="reject" :cancel-text="ask.cancel" :confirm-color="ask.confirmColor" :confirm-text="ask.confirm" :mask-close-able="ask.maskClose" :show-title="false" show-cancel-button></u-modal>
	</view>
</template>

<script>
	import {fetchApplies,rejectApply,agreeApply, stateEnum} from "./api.js"
	import promptSheet from "./promptSheet.vue"
	import { jumpTo , toast } from "@/utils/util.js";
	import chat, { msgTypes } from "@/IM/index.js"
	import { ConversationType } from "@/entity/ConversationType";
	import {mapGetters,mapActions} from "vuex"
	
	export default {
		components:{
			promptSheet
		},
		data() {
			return {
				stateEnum,
				nav:{
					cur:0,
					list:[
						{
							text:'全部',
							value:stateEnum.all
						},
						{
							text:'待处理',
							value:stateEnum.pending
						},
						{
							text:'已通过',
							value:stateEnum.pass
						},
						{
							text:'已拒绝',
							value:stateEnum.reject
						},
					]
				},
				applies:{
					list:[],
					pageNo:1,
					pageSize:10,
					nomore:false,
					loading:false
				},
				prompt:{
					show:false,
					title:'拒绝用户申请，请填写原因',
					placeholder:'最多输入50字',
					maxLength:50,
					confirmText:'拒绝申请',
					confirmColor:'#e54d42'
				},
				ask:{
					show:false,
					content:'',
					confirm:'',
					confirmColor:'#FF0000',
					cancel:'',
					maskClose:true
				},
				bridge:null,
				lock:false
			};
		},
		computed:{
			...mapGetters('user',['userInfo','isReal']),
		},
		filters:{
			timeF(val=''){
				return val.slice(0,16)
			}
		},
		onLoad() {
			this.resetApplies()
		},
		async onPullDownRefresh() {
			try{
				await this.resetApplies()
			}finally{
				uni.stopPullDownRefresh()
			}
		},
		methods:{
			...mapActions('chat', ['setConversation','sendMessage']),
			jumpTo,
			changeNav(index){
				this.nav.cur = index
				this.resetApplies()
			},
			async resetApplies(){
				this.applies.list = []
				this.applies.nomore = false
				this.applies.pageNo = 1
				await this.moreApplies()
			},
			async moreApplies(){
				if(this.applies.loading){
					throw new Error('正在请求中')
				}
				try{
					this.applies.loading = true
					if(this.applies.nomore){
						return []
					}
					const cate = this.nav.list[this.nav.cur]
					const list = await fetchApplies({
						...this.applies,
						status:cate.value
					})
					if(!list||list.length<this.applies.pageSize){
						this.applies.nomore = true
					}else{
						this.applies.pageNo++
					}
					this.applies.list.push(...list)
					return list
				}finally{
					this.applies.loading = false
				}
			},
			async rejectPetition(apply){
				if(this.lock){
					throw new Error('正在请求中')
				}
				await new Promise((resolve, reject) => {
					this.bridge={
						resolve,
						reject
					}
					this.ask.show =true
					this.ask.content = '确认拒绝该申请吗?'
					this.ask.confirm = '拒绝申请'
					this.ask.cancel = '取消'
					this.ask.confirmColor = "#e54d42"
					this.bridge = {
						resolve,
						reject
					}
				})
				
					
				
				
				
				
				
				try{
					this.lock = true
					await rejectApply({
						id:apply.id,
						reason:''
					})
					apply.status = stateEnum.reject
				}finally{
					this.lock = false
				}
			},
			async agreePetition(apply){
				if(this.lock){
					throw new Error('正在请求中')
				}
				await new Promise((resolve, reject) => {
					this.bridge={
						resolve,
						reject
					}
					this.ask.show =true
					this.ask.content = '确认同意该申请吗?'
					this.ask.confirm = '同意'
					this.ask.cancel = '取消'
					this.ask.confirmColor = "#39b54a"
					this.bridge = {
						resolve,
						reject
					}
				})
				try{
					this.lock = true
					await agreeApply({
						id:apply.id
					})
					apply.status=stateEnum.pass
					const msg = chat.createMessage({
						chatType:ConversationType.Group,
						groupId:apply.groupId,
						content: this.$t('chat.join_group_inform_1',{from:apply.userName}),
						msgType: msgTypes.INFORM,
						extras:{
							rich:this.$t('chat.join_group_inform_temp_1',{fromId:apply.userId,from:apply.userName})
						}
					})
					await chat.send(msg)
					uni.$emit('chat_receive',apply.groupId,msg)
				
				}finally{
					this.lock = false
				}
			},
			resolve(e){
				this.bridge&&this.bridge.resolve&&this.bridge.resolve(e)
			},
			reject(e){
				this.bridge&&this.bridge.reject&&this.bridge.reject(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-gray-light{
		background-color: #f1f1f9;
	}
	.nav{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 100;
		height: 80rpx;
		background-color: #ffffff;
		display: flex;
		.item{
			flex: 1;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			&.active{
				position: relative;
				.label{
					color: #0081ff;
					font-weight: bold;
				}
				&::after{
					content: '';
					display: block;
					position: absolute;
					transform: translateX(-50%);
					left: 50%;
					bottom: 8rpx;
					width: 60rpx;
					height: 6rpx;
					border-radius: 10rpx;
					background-color: #0081ff;
				}
			}
		}
		.label{
			font-size: 32rpx;
		}
	}
	.nav-seize{
		height: 80rpx;
	}
	.petition-list{
		background-color: #ffffff;
		.avatar{
			width: 70rpx;
			height: 70rpx;
			flex-shrink: 0;
			.img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #F5F5F5;
			}
		}
		.petition-body{
			padding-left: 90rpx;
		}
		.btn-group{
			display: flex;
			.btn{
				width: 160rpx;
				height: 60rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				&.line-red{
					border: 2rpx solid #e54d42;
					color: #e54d42;
				}
				&.reject{
					background-color: rgba($color:#e54d42, $alpha:0.1);
					color: #e54d42;
				}
				&.pass{
					background-color: rgba($color:#39b54a, $alpha:0.1);
					color: #39b54a;
				}
			}
		}
	}
</style>
